import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import {Modal, Divider, Table, Icon, Spin, Button, Input, Select, DatePicker, Form, Row, Col, Upload, message, Progress } from 'antd'; 
const Option = Select.Option;
const { TextArea } = Input;
const FormItem = Form.Item;
import DescriptionList from 'components/DescriptionList';

const { Description } = DescriptionList;
const Dragger = Upload.Dragger;
import styles from './index.less'

import token from '../../utils/token';
import {env, host} from '../../utils/request'

function buildAuthorization() {
  let tokenVal = token.get();
  return (token !== '') ? tokenVal : '';
}

@Form.create()
class StageEdit extends PureComponent {
  constructor(props) {
    super(props);
    this.state ={
      uploading: false,
      upLoadUrl: '',
      upLoadProcess: 0,
      isAndroid: false,
    }
  }
  componentDidMount() {
    this.setState({

    })
  }
  componentWillReceiveProps(nextProps) {
    // clean state

  }
  handleSearch = e => {
    e.preventDefault();
    const { form,addVersion,updateVersion,isEdit,editCon,source} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(isEdit){
        fieldsValue.id = editCon.id;
        fieldsValue.source = editCon.source;
        updateVersion(fieldsValue)
      }else {
        fieldsValue.source =source;
        addVersion(fieldsValue)
      }
      form.resetFields();
    });
  };
  handleFormReset = () => {
    const { form, dispatch,handleModal } = this.props;
    handleModal(false)
    form.resetFields();
  };

  handleUploadStart = (file) => {
    this.setState({
      uploading: true
    })
  };

  handleTypeChange = (val) => {
    this.setState({
      isAndroid: val == 'android' ? true : false
    })
  };

  render() {
    const { form ,stageSelect,deviceSelect,auditSelect,updateSelect,isEdit,editCon,statusSelect} = this.props;
    const { isAndroid, upLoadProcess } = this.state;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };

    let vm = this;
    const uploadProps = {
      name: 'file',
      headers: {
        Authorization: buildAuthorization(),
      },
      onChange(info) {console.log(info.event)
        const status = info.file.status;
        const { form } = vm.props;
        if (status !== 'uploading') {}
        if (status === 'done') {
          message.success(`${info.file.name} 上传成功.`);
          vm.setState({
            uploading: false,
          });
          form.setFieldsValue({
            downloadUrl: info.file.response.data
          })
        } else if (status === 'error') {
          message.error(`${info.file.name} 上传失败.`);
          vm.setState({
            uploading: false,
          });
        }
        if (info.event && info.event.percent) {
          vm.setState({
            upLoadProcess: info.event.percent.toFixed(1)
          })
        }
      },
    };
    return (
      <div>
        <Form onSubmit={this.handleSearch}  style={{ marginBottom: 24 }}>
          <FormItem label="设备类型"  {...formItemLayout}>
            {getFieldDecorator('mobileType', {
              initialValue:isEdit ? editCon.mobileType:null,
              rules: [{
                required: true, message: '请选择',
              }],
            })( <Select onChange={this.handleTypeChange}>
              {
                deviceSelect.map((item,i)=>{
                  return  <Option value={item.val} key={i}>{item.tit}</Option>
                })
              }
            </Select>)}
          </FormItem>
          <FormItem label="版本号"  {...formItemLayout}>
            {getFieldDecorator('version',{
              initialValue:isEdit ? editCon.version:null,
              rules: [{
                required: true, message: '请输入',
              }],
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem label="借款屏蔽状态"  {...formItemLayout}>
            {getFieldDecorator('status',{
              initialValue:isEdit ? editCon.status:null,
              rules: [{
                required: true, message: '请输入',
              }],
            })(<Select>
              {
                statusSelect.map((item,i)=>{
                  return  <Option value={item.val} key={i}>{item.tit}</Option>
                })
              }
            </Select>)}
          </FormItem>
          <FormItem label="AppId"  {...formItemLayout}>
            {getFieldDecorator('appId',{
              initialValue:isEdit ? editCon.appId:null,
              rules: [{
                required: false, message: '请输入',
              }],
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem label="提审开关"  {...formItemLayout}>
            {getFieldDecorator('audit', {
              initialValue:isEdit ? editCon.audit:null,
              rules: [{
                required: false, message: '请选择',
              }],
            })( <Select>
              {
                auditSelect.map((item,i)=>{
                  return  <Option value={item.val} key={i}>{item.tit}</Option>
                })
              }
            </Select>)}
          </FormItem>
          {
            isEdit ? '':
              <FormItem label="分期状态显示" {...formItemLayout}>
                {getFieldDecorator('installmentStatus',{
                  rules: [{
                    required: true, message: '请选择',
                  }],
                })( <Select>
                  {
                    stageSelect.map((item,i)=>{
                      return  <Option value={item.val} key={i}>{item.tit}</Option>
                    })
                  }
                </Select>)}
              </FormItem>

          }
          <FormItem label="更新内容"  {...formItemLayout}>
            {getFieldDecorator('updateContent',{
              initialValue:isEdit ? editCon.updateContent:null,
              rules: [{
                required: true, message: '请输入',
              }],
            })(<Input placeholder="请输入" />)}
          </FormItem>
          <FormItem label="是否强更"  {...formItemLayout}>
            {getFieldDecorator('updateMust', {
              initialValue:isEdit ? editCon.updateMust:null,
              rules: [{
                required: true, message: '请选择',
              }],
            })( <Select >
              {
                updateSelect.map((item,i)=>{
                  return  <Option value={item.val} key={i}>{item.tit}</Option>
                })
              }
            </Select>)}
          </FormItem>
          <div className={styles.positionwrap}>
            <FormItem label="渠道"  {...formItemLayout} >
              {getFieldDecorator('channel', {
                initialValue:isEdit ? editCon.channel:null,
                rules: [{
                  required: true, message: '请输入',
                }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </div>
          <FormItem label="URL"  {...formItemLayout}>
            {getFieldDecorator('downloadUrl', {
              initialValue:isEdit ? editCon.downloadUrl:null,
              rules: [{
                required: true, message: '请输入',
              }],
            })( <Input placeholder="请输入" />)}
          </FormItem>
          <FormItem label="APP上传"  {...formItemLayout}>
            <Dragger
              {...uploadProps} 
              action={host[env] + '/user/creditMarket/upload/'}
              showUploadList={false} 
              beforeUpload={(file, fileList) => this.handleUploadStart(file, fileList)}
            >
              <div>
                <Icon type={this.state.uploading ? (upLoadProcess == 100 ? 'loading' : '') : 'plus'} />
                {
                  this.state.uploading && upLoadProcess == 100 ? <span> server处理中</span> : ''
                }
                {
                  this.state.uploading ? <div><Progress type="circle" percent={upLoadProcess} width={80} /></div> : ''
                }
              </div>
            </Dragger>
          </FormItem>

          <Row style={{textAlign: 'center'}}>
            <Button type="primary" htmlType="submit" >
              保存
            </Button>
            <Button  onClick={this.handleFormReset} style={{marginLeft:20}}>
              取消
            </Button>
          </Row>
        </Form>


      </div>


    );
  }
}

export default StageEdit;
